<style lang="scss" scoped>
	@import url("@/static/css/flex.css");
	.Page{
		width: 100%;
		height: auto;
		.headerBox{
			padding: 12rpx 20rpx 20rpx 40rpx;
			box-sizing: border-box;
			.wsdyr{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9DA5A8;
				text-align: right;

			}
			.avater{
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.nickname{
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;

			}
			.ertic{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				margin: 14rpx 0;
			}
			.jindu{
				width: 400rpx;
				height: 24rpx;
				background: #EEEEEE;
				border-radius: 16rpx;
				overflow: hidden;
				.jindu1{
					width: 250rpx;
					height: 24rpx;
					background: linear-gradient(90deg, #FFB305 0%, #FF4A4A 100%);
					// border-radius: 6px 0px 0px 6px;

				}
			}
		}
		.topic{
			padding: 0 28rpx;background-color: #F3F4F5;
			height: 60rpx;
			box-sizing: border-box;
			width: 100%;
			.tip{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
			}
			.xq{
				width: 85rpx;
				height: 34rpx;
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9DA5A8;
				image{
					width: 35rpx;
					height: 25rpx;
				}
			}
		}
		.scend{
			.itemmk{
				height: 50%;
				width: 33%;
				text-align: center;
				padding: 28rpx 0;
				.nb{
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #111111;
				}
				.nb1{
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9DA5A8;

				}
			}
		}
		.zhaomu{
			width: 100%;
			height: 340rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #F3F4F5;
			image{
				width: 710rpx;
				height: 300rpx;
			}
		}
		.tabList{
			.top{
				// width: 100%;
				padding: 0 20rpx;
				height: 100rpx;
				background: #FFFFFF;
				position: relative;
				line-height: 100rpx;
				text-align: center;
				.tab{
					width: 50%;
					height: 100%;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
				}
				.check{
					font-weight: 600;
				}
				.line{
					width: 80rpx;
					height: 4rpx;
					background: #DB1B22;
					border-radius: 2rpx;
					position: absolute;
					bottom: 10rpx;
					// left: 20%;
				}
			}
			.listItem{
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				border-top: 1px solid #DDDDDD;
				padding: 0 40rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				.col_9DA5A8{
					color: #9DA5A8;
				}
			}
			.xl{
				background-color: #f3f3f3;
				padding: 10rpx 40rpx;
				box-sizing: border-box;
				text-align: center;
				.ef{
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
				}
				.col_9DA5A8{
					color: #9DA5A8;
				}
			}
		}
	}
</style>
<template>
	<view class="Page">
		<view class="headerBox">
			<view class="wsdyr" @click="$linkTo('./web_view/web_view?url='+dataList.spokesman_introduction)">
				代言人说明
			</view>
			<view class="flex_r_start">
				<view class="avater">
					<image style="width: 100%;height:100%;" :src="dataList.avater||'../../static/微信图片_20201124091755.png'" mode=""></image>
				</view>
				<view style="margin-left: 32rpx;">
					<view class="nickname">{{dataList.nickname}}</view>
					<view class="ertic flex_r_between" v-if="dataList.current_consum==dataList.spokesman_setting.spokesman_total">恭喜您成为了代言人，可以分享赚钱啦！</view>
					<view class="ertic flex_r_between" v-else>
						<view>累积消费额</view>
						<view>{{dataList.current_consum}}/{{dataList.spokesman_setting.spokesman_total}}</view>
					</view>
					<view class="jindu">
						<view class="jindu1" :style="{width:dataList.current_consum/dataList.spokesman_setting.spokesman_total*100+'%'}">
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="topic flex_r_between">
			<view class="tip">一次性消费{{dataList.spokesman_setting.spokesman_one}}元或累计消费{{dataList.spokesman_setting.spokesman_total}}元即可成为代言人</view>
			<view class="xq flex_item_center" @click="$linkTo('./web_view/web_view?url='+dataList.spokesman_detail)">
				<view>详情</view>
				<image src="../../static/direction_right_gray.png" mode=""></image>
			</view>	
		</view>
		<view class="scend flex_r_between_wrap">
			<view class="itemmk">
				<view class="nb">{{dataList.commission}}</view>
				<view class="nb1">奖励金</view>
			</view>
			<view class="itemmk">
				<view class="nb">{{dataList.sale_amount}}</view>
				<view class="nb1">销售额</view>
			</view>
			<view class="itemmk">
				<view class="nb">{{dataList.fans_count}}</view>
				<view class="nb1">粉丝数</view>
			</view>
			<view class="itemmk">
				<view class="nb">{{content.spokesman_today.commission}}</view>
				<view class="nb1">今日奖励</view>
			</view>
			<view class="itemmk">
				<view class="nb">{{content.spokesman_today.today_sale}}</view>
				<view class="nb1">今日销售</view>
			</view>
			<view class="itemmk">
				<view class="nb">{{content.spokesman_today.today_fans}}</view>
				<view class="nb1">今日新增</view>
			</view>
		</view>
		<view class="zhaomu" @click="$linkTo('./web_view/web_view?url='+dataList.spokesman_introduction)">
			<image src="../../static/spokesmanImg/Snipaste_2020-10-27_09-06-55.png" mode=""></image>
		</view>
		<view class="tabList" >
			<view class="top flex_r_between">
				<view class="tab" :class="{check:tab}" @click="tab=true" style="text-align: start;">粉丝列表</view>
				<view class="tab" :class="{check:!tab}" @click="tab=false" style="text-align: end;">团队列表</view>
				<view class="line" :style="{left:tab?'5%':'83%'}"></view>
			</view>
			<view>
				<view class="" v-for="(item,index) in tabList" :key="index">
					<view class="listItem flex_r_between">
						<view class="flex_r_start">
							<image style="width: 40rpx;height: 40rpx;border-radius: 50%;margin-right: 20rpx;" :src="item.avater" mode=""></image>{{item.nickname}}
						</view>
						<view class="col_9DA5A8 flex_item_center" @click="xlCheckeun(item.customer_id,index)">{{$dateFormat(JSON.parse(item.date_add)*1000,'Y-m-d')}}
							<image v-show="!tab && xlCheck!==index" style="width: 22rpx;height: 20rpx;margin-left: 5rpx;" src="../../static/direction_bottom.png" mode=""></image>
							<image v-show="xlCheck===index" style="width: 22rpx;height: 20rpx;margin-left: 5rpx;" src="../../static/direction_top.png" mode=""></image>
						</view>
					</view>
					<view class="xl flex_r_between" v-if="!tab && xlCheck==index">
						<view class="ef">
							<view class="col_9DA5A8">总奖励</view>
							<view>{{tuandui.commission}}</view>
						</view>
						<view class="ef">
							<view class="col_9DA5A8">销售额</view>
							<view>{{tuandui.sale_amount}}</view>
						</view>
						<view class="ef">
							<view class="col_9DA5A8">团队</view>
							<view>{{tuandui.date_lose_spokesperson}}</view>
						</view>
						<view class="ef">
							<view class="col_9DA5A8">个人消费额</view>
							<view>{{tuandui.current_consum}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				tab:true,
				dataList:[],
				page:1,
				tabList:[],
				xlCheck:NaN,
				tuandui:null,
				content:[]
			};
		},
		watch:{
			tab:function(val,oldVal){
				if(!val){
					this.$request('/app/user/getTeams','post',{
						access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
						page:this.page
					}).then(res=>{
						this.tabList=res.content
					})
				}else{
					this.tabList=this.dataList.fans
				}
			}
		},
		onReachBottom(){
			if(!this.tab){
				this.page++
				this.$request('/app/user/getTeams','post',{
					access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
					page:this.page
				}).then(res=>{
					this.tabList=[...this.tabList,...res.content]
				})
			}
		},
		onShow() {
			this.$request('/app/user/spokesman','post',{
				access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
			}).then(res=>{
				console.log(res)
				if(res.errcode==99){
					uni.showModal({
					    title: '提示',
					    content: res.message,
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url:"/pages/login/login"
								})
					        } else if (res.cancel) {
								console.log(222)
					        }
					    }
					});
				}else{
				this.dataList=res.content
				console.log(this.dataList)
				this.tabList=res.content.fans					
				}
			})
			this.$request('/app/user/getUserInfo','post',{
				access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
			}).then(res=>{
				console.log(res)
				if(res.errcode==0){
					this.content=res.content
					console.log(this.content)
				}else if(res.errcode==99){
				}
			})
		},
		methods:{
			xlCheckeun(id,index){
				if(this.xlCheck==NaN || this.xlCheck!==index){
					this.xlCheck=index
					this.$request('/app/user/teamDetail','post',{
						customer_id:id,
						access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
					}).then(res=>{
						console.log(res)
						this.tuandui=res.content
					})
				}else{
					this.xlCheck=NaN
				}
				
			}
		}
	}
</script>

